/* cssload-thecube */
.cssload-thecube
{
    position: relative;

    width: 73px;
    height: 73px;
    margin: 0 auto;
    margin-top: 49px;

    -webkit-transform: rotateZ(45deg);
       -moz-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
         -o-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube
{
    position: relative;

    -webkit-transform: rotateZ(45deg);
       -moz-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
         -o-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube
{
    position: relative;

    float: left;

    width: 50%;
    height: 50%;

    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
       -moz-animation: cssload-fold-thecube 2.76s infinite linear both;
        -ms-animation: cssload-fold-thecube 2.76s infinite linear both;
         -o-animation: cssload-fold-thecube 2.76s infinite linear both;
            animation: cssload-fold-thecube 2.76s infinite linear both;

    background-color: rgb(43,160,199);
}
.cssload-thecube .cssload-c2
{
    -webkit-transform: scale(1.1) rotateZ(90deg);
       -moz-transform: scale(1.1) rotateZ(90deg);
        -ms-transform: scale(1.1) rotateZ(90deg);
         -o-transform: scale(1.1) rotateZ(90deg);
            transform: scale(1.1) rotateZ(90deg);
}
.cssload-thecube .cssload-c3
{
    -webkit-transform: scale(1.1) rotateZ(180deg);
       -moz-transform: scale(1.1) rotateZ(180deg);
        -ms-transform: scale(1.1) rotateZ(180deg);
         -o-transform: scale(1.1) rotateZ(180deg);
            transform: scale(1.1) rotateZ(180deg);
}
.cssload-thecube .cssload-c4
{
    -webkit-transform: scale(1.1) rotateZ(270deg);
       -moz-transform: scale(1.1) rotateZ(270deg);
        -ms-transform: scale(1.1) rotateZ(270deg);
         -o-transform: scale(1.1) rotateZ(270deg);
            transform: scale(1.1) rotateZ(270deg);
}
.cssload-thecube .cssload-c2:before
{
    -webkit-animation-delay: .35s;
       -moz-animation-delay: .35s;
        -ms-animation-delay: .35s;
         -o-animation-delay: .35s;
            animation-delay: .35s;
}
.cssload-thecube .cssload-c3:before
{
    -webkit-animation-delay: .69s;
       -moz-animation-delay: .69s;
        -ms-animation-delay: .69s;
         -o-animation-delay: .69s;
            animation-delay: .69s;
}
.cssload-thecube .cssload-c4:before
{
    -webkit-animation-delay: 1.04s;
       -moz-animation-delay: 1.04s;
        -ms-animation-delay: 1.04s;
         -o-animation-delay: 1.04s;
            animation-delay: 1.04s;
}



@keyframes cssload-fold-thecube
{
    0%,
    10%
    {
        transform: perspective(136px) rotateX(-180deg);

        opacity: 0;
    }
    25%,
    75%
    {
        transform: perspective(136px) rotateX(0deg);

        opacity: 1;
    }
    90%,
    100%
    {
        transform: perspective(136px) rotateY(180deg);

        opacity: 0;
    }
}

@-o-keyframes cssload-fold-thecube
{
    0%,
    10%
    {
        -o-transform: perspective(136px) rotateX(-180deg);

        opacity: 0;
    }
    25%,
    75%
    {
        -o-transform: perspective(136px) rotateX(0deg);

        opacity: 1;
    }
    90%,
    100%
    {
        -o-transform: perspective(136px) rotateY(180deg);

        opacity: 0;
    }
}

@-ms-keyframes cssload-fold-thecube
{
    0%,
    10%
    {
        -ms-transform: perspective(136px) rotateX(-180deg);

        opacity: 0;
    }
    25%,
    75%
    {
        -ms-transform: perspective(136px) rotateX(0deg);

        opacity: 1;
    }
    90%,
    100%
    {
        -ms-transform: perspective(136px) rotateY(180deg);

        opacity: 0;
    }
}

@-webkit-keyframes cssload-fold-thecube
{
    0%,
    10%
    {
        -webkit-transform: perspective(136px) rotateX(-180deg);

        opacity: 0;
    }
    25%,
    75%
    {
        -webkit-transform: perspective(136px) rotateX(0deg);

        opacity: 1;
    }
    90%,
    100%
    {
        -webkit-transform: perspective(136px) rotateY(180deg);

        opacity: 0;
    }
}

@-moz-keyframes cssload-fold-thecube
{
    0%,
    10%
    {
        -moz-transform: perspective(136px) rotateX(-180deg);

        opacity: 0;
    }
    25%,
    75%
    {
        -moz-transform: perspective(136px) rotateX(0deg);

        opacity: 1;
    }
    90%,
    100%
    {
        -moz-transform: perspective(136px) rotateY(180deg);

        opacity: 0;
    }
}


/* windows 8 */
.windows8
{
    position: relative;

    width: 170px;
    height: 170px;
    margin: auto;
}

.windows8 .wBall
{
    position: absolute;

    width: 162px;
    height: 162px;

    -webkit-transform: rotate(225deg);
       -moz-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
         -o-transform: rotate(225deg);
            transform: rotate(225deg);
    -webkit-animation: orbit 6.96s infinite;
       -moz-animation: orbit 6.96s infinite;
        -ms-animation: orbit 6.96s infinite;
         -o-animation: orbit 6.96s infinite;
            animation: orbit 6.96s infinite;

    opacity: 0;
}

.windows8 .wBall .wInnerBall
{
    position: absolute;
    top: 0;
    left: 0;

    width: 21px;
    height: 21px;

    border-radius: 21px;
    background: rgba(200,200,200,.98);
}

.windows8 #wBall_1
{
    -webkit-animation-delay: 1.52s;
       -moz-animation-delay: 1.52s;
        -ms-animation-delay: 1.52s;
         -o-animation-delay: 1.52s;
            animation-delay: 1.52s;
}

.windows8 #wBall_2
{
    -webkit-animation-delay: .3s;
       -moz-animation-delay: .3s;
        -ms-animation-delay: .3s;
         -o-animation-delay: .3s;
            animation-delay: .3s;
}

.windows8 #wBall_3
{
    -webkit-animation-delay: .61s;
       -moz-animation-delay: .61s;
        -ms-animation-delay: .61s;
         -o-animation-delay: .61s;
            animation-delay: .61s;
}

.windows8 #wBall_4
{
    -webkit-animation-delay: .91s;
       -moz-animation-delay: .91s;
        -ms-animation-delay: .91s;
         -o-animation-delay: .91s;
            animation-delay: .91s;
}

.windows8 #wBall_5
{
    -webkit-animation-delay: 1.22s;
       -moz-animation-delay: 1.22s;
        -ms-animation-delay: 1.22s;
         -o-animation-delay: 1.22s;
            animation-delay: 1.22s;
}



@keyframes orbit
{
    0%
    {
        z-index: 99;

        transform: rotate(180deg);
        animation-timing-function: ease-out;

        opacity: 1;
    }

    7%
    {
        transform: rotate(300deg);
        animation-timing-function: linear;

        opacity: 1;

        origin: 0;
    }

    30%
    {
        transform: rotate(410deg);
        animation-timing-function: ease-in-out;

        opacity: 1;

        origin: 7%;
    }

    39%
    {
        transform: rotate(645deg);
        animation-timing-function: linear;

        opacity: 1;

        origin: 30%;
    }

    70%
    {
        transform: rotate(770deg);
        animation-timing-function: ease-out;

        opacity: 1;

        origin: 39%;
    }

    75%
    {
        transform: rotate(900deg);
        animation-timing-function: ease-out;

        opacity: 1;

        origin: 70%;
    }

    76%
    {
        transform: rotate(900deg);

        opacity: 0;
    }

    100%
    {
        transform: rotate(900deg);

        opacity: 0;
    }
}

@-o-keyframes orbit
{
    0%
    {
        z-index: 99;

        -o-transform: rotate(180deg);
        -o-animation-timing-function: ease-out;

        opacity: 1;
    }

    7%
    {
        -o-transform: rotate(300deg);
        -o-animation-timing-function: linear;

        opacity: 1;

        -o-origin: 0;
    }

    30%
    {
        -o-transform: rotate(410deg);
        -o-animation-timing-function: ease-in-out;

        opacity: 1;

        -o-origin: 7%;
    }

    39%
    {
        -o-transform: rotate(645deg);
        -o-animation-timing-function: linear;

        opacity: 1;

        -o-origin: 30%;
    }

    70%
    {
        -o-transform: rotate(770deg);
        -o-animation-timing-function: ease-out;

        opacity: 1;

        -o-origin: 39%;
    }

    75%
    {
        -o-transform: rotate(900deg);
        -o-animation-timing-function: ease-out;

        opacity: 1;

        -o-origin: 70%;
    }

    76%
    {
        -o-transform: rotate(900deg);

        opacity: 0;
    }

    100%
    {
        -o-transform: rotate(900deg);

        opacity: 0;
    }
}

@-ms-keyframes orbit
{
    0%
    {
        z-index: 99;

        -ms-transform: rotate(180deg);
        -ms-animation-timing-function: ease-out;

        opacity: 1;
    }

    7%
    {
        -ms-transform: rotate(300deg);
        -ms-animation-timing-function: linear;

        opacity: 1;

        -ms-origin: 0;
    }

    30%
    {
        -ms-transform: rotate(410deg);
        -ms-animation-timing-function: ease-in-out;

        opacity: 1;

        -ms-origin: 7%;
    }

    39%
    {
        -ms-transform: rotate(645deg);
        -ms-animation-timing-function: linear;

        opacity: 1;

        -ms-origin: 30%;
    }

    70%
    {
        -ms-transform: rotate(770deg);
        -ms-animation-timing-function: ease-out;

        opacity: 1;

        -ms-origin: 39%;
    }

    75%
    {
        -ms-transform: rotate(900deg);
        -ms-animation-timing-function: ease-out;

        opacity: 1;

        -ms-origin: 70%;
    }

    76%
    {
        -ms-transform: rotate(900deg);

        opacity: 0;
    }

    100%
    {
        -ms-transform: rotate(900deg);

        opacity: 0;
    }
}

@-webkit-keyframes orbit
{
    0%
    {
        z-index: 99;

        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;

        opacity: 1;
    }

    7%
    {
        -webkit-transform: rotate(300deg);
        -webkit-animation-timing-function: linear;

        opacity: 1;

        -webkit-origin: 0;
    }

    30%
    {
        -webkit-transform: rotate(410deg);
        -webkit-animation-timing-function: ease-in-out;

        opacity: 1;

        -webkit-origin: 7%;
    }

    39%
    {
        -webkit-transform: rotate(645deg);
        -webkit-animation-timing-function: linear;

        opacity: 1;

        -webkit-origin: 30%;
    }

    70%
    {
        -webkit-transform: rotate(770deg);
        -webkit-animation-timing-function: ease-out;

        opacity: 1;

        -webkit-origin: 39%;
    }

    75%
    {
        -webkit-transform: rotate(900deg);
        -webkit-animation-timing-function: ease-out;

        opacity: 1;

        -webkit-origin: 70%;
    }

    76%
    {
        -webkit-transform: rotate(900deg);

        opacity: 0;
    }

    100%
    {
        -webkit-transform: rotate(900deg);

        opacity: 0;
    }
}

@-moz-keyframes orbit
{
    0%
    {
        z-index: 99;

        -moz-transform: rotate(180deg);
        -moz-animation-timing-function: ease-out;

        opacity: 1;
    }

    7%
    {
        -moz-transform: rotate(300deg);
        -moz-animation-timing-function: linear;

        opacity: 1;

        -moz-origin: 0;
    }

    30%
    {
        -moz-transform: rotate(410deg);
        -moz-animation-timing-function: ease-in-out;

        opacity: 1;

        -moz-origin: 7%;
    }

    39%
    {
        -moz-transform: rotate(645deg);
        -moz-animation-timing-function: linear;

        opacity: 1;

        -moz-origin: 30%;
    }

    70%
    {
        -moz-transform: rotate(770deg);
        -moz-animation-timing-function: ease-out;

        opacity: 1;

        -moz-origin: 39%;
    }

    75%
    {
        -moz-transform: rotate(900deg);
        -moz-animation-timing-function: ease-out;

        opacity: 1;

        -moz-origin: 70%;
    }

    76%
    {
        -moz-transform: rotate(900deg);

        opacity: 0;
    }

    100%
    {
        -moz-transform: rotate(900deg);

        opacity: 0;
    }
}
